<template>
	<div class="zui">
		<div class="benfang">
			<router-link to="/indexOne/sonOne"><i class="down"><img src="../images/down.png" alt=""></i></router-link>
			<!--<p>{{this.$store.state.curInfo}}</p>-->
			<p>{{this.$store.state.curTitle}}</p>
			<!--<div class="biao">标准</div>-->
			<div class="yinyue">
				<div v-show="isShow" class="singer">
					<img src="../images/02.png" alt="">
					<div @click="show" class="Tupac"><img :style="{animationPlayState:isPlay ? 'running':'paused'}" :src="imgs" alt=""></div>
					<div class="stylus"><img src="../images/6.png" alt=""></div>
				</div>
			</div>
			<div @click="show2" v-show="isShow2" class="lyric">
				<ul>
					<li v-for="n in 50">歌词啊</li>
				</ul>
			</div>
			<div class="progress">
				<div class="kais">00:00</div>
				<div class="jies">03:11</div>
				<div class="one">
					<div class="two">
						<div class="ther">
							<div class="fou"></div>
						</div>
					</div>
				</div>
				<div class="progress_one">
					<li><img src="../images/xun.png" alt=""></li>
					<li><img @click="shangYq" src="../images/zuo.png" alt=""></li>
					<li><img @click="boF" :src="src"></li>
					<li><img @click="xiayiqu" src="../images/you.png" alt=""></li>
					<li><img src="../images/lieb.png" alt=""></li>
				</div>
				<div class="collect">
					<li><img src="../images/ai.png" alt=""></li>
					<li><img src="../images/xiazai.png" alt=""></li>
					<li><img src="../images/fenx.png" alt=""></li>
					<li><img src="../images/dian.png" alt=""></li>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import jsonp from "jsonp";
	export default {
		name: "app",
		data() {
			return {
				msg: "nihao",
				src: "../images/zantin.png",
				isShow: true,
				isShow2: false,
				isPlay :true,
			}
		},
		methods: {
			//			changeImg: function() {
			//				this.srcd = this.srcd == "../images/bofang.png" ? "../images/zantin.png" : "../images/bofang.png";
			//			},
			show: function() {
				this.isShow = !this.isShow;
				this.isShow2 = true;
			},
			show2: function() {
				this.isShow = true;
				this.isShow2 = false;
			},
			boF() {
				this.isPlay = !this.isPlay;
				if(this.$store.state.bof) {
					this.src = "../images/bofang.png"
					this.$store.commit("bofo", false)
				} else {
					this.src = "../images/zantin.png"
					this.$store.commit("bofo", true)
				}
			},
			shangYq(){
				var a = this.$store.state.musicIndex-1;
				if(a < 0){
					a=0
				}
				jsonp("http://tingapi.ting.baidu.com/v1/restserver/ting/?method=baidu.ting.song.play&songid=" + this.$store.state.musicList[a].song_id, null, (err, res) => {
					if(err) {
						console.log(err)
					} else {
						console.log(res)
						this.$store.commit("changSong", res.bitrate.file_link)
						this.$store.commit("changeid", res.songinfo.pic_big)
						this.$store.commit("changtitle", res.songinfo.title)
						this.$store.commit("changinfo", res.songinfo.info)
					}
				})
				this.$store.commit("musicIndex",a)
			},
			xiayiqu(){
				var a = this.$store.state.musicIndex+1;
				if(a>this.$store.state.musicList.length-1){
					a=0
				}
				jsonp("http://tingapi.ting.baidu.com/v1/restserver/ting/?method=baidu.ting.song.play&songid=" + this.$store.state.musicList[a].song_id, null, (err, res) => {
					if(err) {
						console.log(err)
					} else {
						console.log(res)
						this.$store.commit("changSong", res.bitrate.file_link)
						this.$store.commit("changeid", res.songinfo.pic_big)
						this.$store.commit("changtitle", res.songinfo.title)
						this.$store.commit("changinfo", res.songinfo.info)
					}
				})
				this.$store.commit("musicIndex",a)
			}
		},
		computed: {
			imgs() {
				return this.$store.state.songID;
				//				return this.$store.state.curInfo,
				//				return this.$store.state.curTitle,
			},
		},
		components: {}
	}
</script>

<style scoped lang="scss">
	body html {
		height: 100%;
	}
	
	.zui {
		width: 100%;
		height: 100%;
	}
	
	.benfang {
		width: 100%;
		height: 100%;
		background: url(../images/5.jpg) no-repeat 50% 50% / cover;
		position: relative;
		.down {
			position: absolute;
			top: 4%;
			left: 3.7%;
			width: 5.6%;
			img {
				width: 100%;
			}
		}
		p {
			padding-top: 3.7%;
			text-align: center;
			font-size: 20px;
			line-height: 20px;
			color: white;
			padding-bottom: 1%;
		}
		.lyric {
			width: 80%;
			height: 50%;
			position: absolute;
			top: 17%;
			left: 50%;
			transform: translate(-50%);
			ul {
				width: 100%;
				height: 100%;
				overflow: auto;
				li {
					width: 100%;
					height: 10%;
					list-style: none;
					color: #2f2a2a;
					text-align: center;
					letter-spacing: 1px;
				}
			}
		}
		.biao {
			margin-top: 1.7%;
			width: 10%;
			text-align: center;
			position: absolute;
			left: 53%;
			padding: .1% 0;
			margin-left: 1.6%;
			font-size: 14px;
			line-height: 14px;
			color: red;
			border: solid 1px red;
		}
		span {
			margin-top: 1.6%;
			position: absolute;
			font-size: 24px;
			line-height: 24px;
			color: white;
			left: 50%;
			font-weight: 600;
			transform: translate(-50%, 0);
		}
		.singer {
			position: absolute;
			top: 22%;
			left: 50%;
			transform: translate(-50%);
			width: 75%;
			img {
				width: 100%;
			}
			.stylus {
				width: 38%;
				height: 30%;
				position: absolute;
				top: -15%;
				right: -16%;
				img {
					width: 70%;
				}
			}
			.Tupac {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				overflow: hidden;
				width: 77%;
				border-radius: 50%;
				img {
					width: 100%;
					height: 100%;
					animation: abc 10s infinite linear;
				}
			}
		}
		.to {
			position: fixed;
			top: 0;
			left: 0;
		}
		.di {
			position: fixed;
			bottom: 0;
			left: 0;
		}
		.progress {
			position: absolute;
			left: 50%;
			bottom: 0;
			transform: translate(-50%);
			width: 90%;
			height: 22%;
			.kais {
				width: 5%;
				position: absolute;
				top: -4%;
				left: -3%;
				font-size: 12px;
				color: white;
			}
			.jies {
				width: 5%;
				position: absolute;
				top: -4%;
				right: 2%;
				font-size: 12px;
				color: white;
			}
			.one {
				width: 75%;
				margin: 0 auto;
				height: 3px;
				background: #c9bec6;
				border-radius: 10px;
				position: relative;
				.two {
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0;
					left: 0;
					.ther {
						width: 0%;
						height: 100%;
						background: red;
						position: relative;
						.fou {
							width: 10px;
							height: 10px;
							position: absolute;
							top: -100%;
							right: 0;
							border-radius: 50%;
							background: white;
						}
					}
				}
			}
			.progress_one {
				width: 100%;
				height: 40%;
				position: absolute;
				top: 43%;
				left: 50%;
				transform: translate(-50%, -50%);
				list-style: none;
				font-size: 0px;
				li {
					width: 20%;
					height: 100%;
					display: inline-block;
					font-size: 12px;
					position: relative;
					img {
						width: 40%;
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
					}
				}
			}
			.collect {
				width: 100%;
				height: 30%;
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translate(-50%);
				list-style: none;
				font-size: 0px;
				li {
					width: 25%;
					height: 100%;
					display: inline-block;
					font-size: 12px;
					position: relative;
					img {
						width: 30%;
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
					}
				}
			}
		}
	}
	
	@keyframes abc {
		0% {
			transform: rotate(0deg);
		}
		25% {
			transform: rotate(90deg);
		}
		50% {
			transform: rotate(180deg);
		}
		75% {
			transform: rotate(270deg);
		}
		100% {
			transform: rotate(360deg);
		}
	}
</style>